<!--
  民主测评首页-头部搜索新建模块
- -->
<template>
  <div class="evaluation-search-box">
    <div class="search-left">
      <el-select
        class="search-item"
        v-model="selectParams.assessmentStatus"
        placeholder="请选择"
        size="small"
        clearable
        :popper-append-to-body="false"
        @change="onParamChange">
        <el-option v-for="item in taskStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input
        class="search-item search-item-inp"
        placeholder="请输入"
        v-model="selectParams.key"
        size="small"
        clearable>
        <el-button slot="append" icon="el-icon-search" class="btnBg" @click.stop="onParamChange" size="small">
          搜索
        </el-button>
      </el-input>
    </div>
    <div class="search-right">
      <el-button class="btnBg" size="small" type="primary" icon="el-icon-user" @click="toPeopleManage()">
        投票人员管理
      </el-button>
      <el-button class="btnBg" size="small" type="primary" icon="el-icon-edit" @click="onAddEditSee()">新建</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'EvaluationSearch',
  emits: ['search', 'task'],
  props: {
    // 状态列表
    taskStatus: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectParams: {
        assessmentStatus: '',
        key: '',
      },
    }
  },
  methods: {
    /* 搜索条件 */
    onParamChange() {
      this.$emit('search', this.selectParams)
    },

    /* 跳转到人员管理页面 */
    toPeopleManage() {
      this.$router.push({
        path: '/minzhu/person',
      })
    },

    /* 新建测评任务 */
    onAddEditSee() {
      this.$emit('task', 'add')
    },
  },
}
</script>
<style lang="scss" scoped>
.evaluation-search-box {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search-left {
    display: flex;
    align-items: center;
    .search-item {
      width: 200px;
      margin-right: 25px;
      &.search-item-inp {
        width: 300px;
        .el-input-group__append .el-button.btnBg {
          background-color: #2b78f1;
          border-color: #2b78f1;
          color: #fff;
        }
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .search-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
